<template>
  <div id="stagecard">
    <div class="main">
      <Row>
        <Col span="24" class="title spacing">{{stageInfo.stageTitle}}</Col>
      </Row>
      <Row>
        <Col span="24">
          <Row>
            <Col span="24" class="spacing">{{stageInfo.stageContentTitle}}</Col>
          </Row>
          <Row>
            <Col span="24" class="leftspacing">
              <p v-for="(itemp,index) in stageInfo.contents" :key="index">{{itemp}}</p>
            </Col>
          </Row>
          <Row>
            <Col span="24" class="spacing">
              {{stageInfo.more}}
              <Button type="text" size="small" class="more" @click="Collapsechange()">{{btnText}}</Button>
            </Col>
          </Row>
          <Row>
            <Col>
              <Collapse v-model="value">
                <Panel name="1">
                  <p slot="content">
                    <Collapse v-model="subvalue" class="Collapse_font">
                      <Panel
                        :name="'1-'+indexx.toString()"
                        v-for="(panel,indexx) in stageInfo.chapter"
                        :key="indexx"
                      >
                        {{panel.chapterTitle}}
                        <p slot="content" class="Collapse_spacing" v-html="panel.content"></p>
                      </Panel>
                    </Collapse>
                  </p>
                </Panel>
              </Collapse>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { Row, Col, Button, Collapse, Panel } from "view-design";
export default {
  name: "stagecard",
  components: {
    Row,
    Col,
    Button,
    Collapse,
    Panel
  },
  props: ["stageInfo"],
  data() {
    return {
      btnText: "查看更多",
      value: "",
      subvalue: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    Collapsechange() {
      if (this.value == "1") {
        this.btnText = "查看更多";
        this.value = "";
      } else {
        this.btnText = "收起";
        this.value = "1";
      }
    }
  },
  created() {},
  mounted() {
    let title = document.getElementsByClassName("ivu-collapse-header")[0];
    let border = document.getElementsByClassName("ivu-collapse")[0];
    border.style = "border:none";
    title.remove();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.main {
  margin: 20px 20px;
  border: 1px solid #e1e1e1;
  background-color: white;
  /* margin-bottom: 700px; */
}
.title {
  background-color: #72d9c2;

  color: #fff;
  font-size: 14px;
}
.spacing {
  padding: 20px 20px;
}
.leftspacing {
  padding: 0 20px;
  font-size: 14px;
  line-height: 18px;
}
.more {
  font-size: 10px;
  color: #4a90e2;
}
.Collapse_font {
  font-size: 12px;
  line-height: 24px;
}
.Collapse_spacing {
  padding: 0 14px;
}
</style>